<!DOCTYPE html>
<html>

<head>
  <title>3D跑酷游戏</title>
  <!-- 引入CSS样式文件 -->
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <!-- 开始菜单 -->
  <div id="startMenu" class="menu">
    <h1 class="game-title">3D跑酷</h1>
    <button id="startButton" class="menu-button">开始游戏</button>
    <button id="settingsButton" class="menu-button">设置</button>
    <button id="instructionsButton" class="menu-button">操作说明</button>
  </div>

  <!-- 游戏界面 -->
  <div id="gameUI" class="overlay hidden">
    <div class="game-stats">
        <div class="score-container">
            分数: <span id="score">0</span>
        </div>
        <div class="level-container">
            关卡: <span id="level">1</span>
        </div>
        <div class="theme-container">
            主题: <span id="theme">森林</span>
        </div>
        <div class="progress-container">
            <div class="progress-bar">
                <div id="levelProgress" class="progress"></div>
            </div>
            <div class="next-level">
                下一级: <span id="nextLevelScore">500</span>
            </div>
        </div>
    </div>
    <button id="pauseButton" class="button">暂停</button>
  </div>

  <!-- 暂停菜单 -->
  <div id="pauseMenu" class="menu hidden">
    <h2>游戏暂停</h2>
    <button id="resumeButton" class="menu-button">继续游戏</button>
    <button id="restartButton" class="menu-button">重新开始</button>
    <button id="pauseSettingsButton" class="menu-button">设置</button>
    <button id="mainMenuButton" class="menu-button">返回主菜单</button>
  </div>

  <!-- 设置面板 -->
  <div id="settingsPanel" class="menu hidden">
    <h2>设置</h2>
    <div class="setting-item">
      <label>音乐音量</label>
      <input type="range" id="musicVolume" min="0" max="100" value="50">
    </div>
    <div class="setting-item">
      <label>音效音量</label>
      <input type="range" id="sfxVolume" min="0" max="100" value="50">
    </div>
    <div class="setting-item">
      <label>控制方式</label>
      <select id="controlType">
        <option value="keyboard">键盘</option>
        <option value="touch">触摸</option>
      </select>
    </div>
    <button id="settingsBackButton" class="menu-button">返回</button>
  </div>

  <!-- 操作说明面板 -->
  <div id="instructionsPanel" class="menu hidden">
    <h2>游戏指南</h2>
    <div class="instructions-container">
      <div class="instruction-section">
        <h3>基本操作</h3>
        <div class="control-item">
          <span class="key">↑</span> 重力反转（在地面和天花板之间切换）
        </div>
        <div class="control-item">
          <span class="key">←</span><span class="key">→</span> 左右移动
        </div>
        <div class="control-item">
          <span class="key">空格</span> 跳跃
        </div>
        <div class="control-item">
          <span class="key">ESC</span> 暂停游戏
        </div>
      </div>

      <div class="instruction-section">
        <h3>道具系统</h3>
        <div class="powerup-item">
          <div class="powerup-icon speed">⚡</div>
          <div class="powerup-desc">
            <strong>加速</strong>当前速度提升50%，效果结束后恢复原速度
          </div>
        </div>
        <div class="powerup-item">
          <div class="powerup-icon shield">🛡️</div>
          <div class="powerup-desc">
            <strong>护盾</strong>暂时无敌，可以穿过障碍物
          </div>
        </div>
        <div class="powerup-item">
          <div class="powerup-icon magnet">🧲</div>
          <div class="powerup-desc">
            <strong>磁铁</strong>增加道具收集范围
          </div>
        </div>
        <div class="powerup-item">
          <div class="powerup-icon slow">🐌</div>
          <div class="powerup-desc">
            <strong>减速</strong>降低速度，效果结束后恢复原速度
          </div>
        </div>
      </div>

      <div class="instruction-section">
        <h3>游戏规则</h3>
        <ul class="rules-list">
          <li>躲避障碍物，收集道具，尽可能坚持更长时间</li>
          <li>每个关卡都有特定类型的障碍物，难度逐渐提升</li>
          <li>游戏速度会随时间缓慢增加</li>
          <li>达到目标分数后升级，每次升级：
            <ul>
              <li>当前速度翻倍</li>
              <li>后续速度增长更快</li>
              <li>切换到新的主题和障碍物类型</li>
            </ul>
          </li>
        </ul>
      </div>

      <div class="instruction-section">
        <h3>主题关卡</h3>
        <div class="theme-item">
          <strong>🌳 森林</strong>：尖刺型障碍物
        </div>
        <div class="theme-item">
          <strong>🏜️ 沙漠</strong>：旋转立方体障碍物
        </div>
        <div class="theme-item">
          <strong>🌌 太空</strong>：菱形水晶障碍物
        </div>
      </div>
    </div>
    <button id="instructionsBackButton" class="menu-button">返回</button>
  </div>

  <!-- 新手引导界面 -->
  <div id="tutorialOverlay" class="overlay hidden">
    <div id="tutorialContent" class="tutorial-content">
      <p id="tutorialText"></p>
      <button id="nextTutorialButton" class="menu-button">下一步</button>
      <button id="skipTutorialButton" class="menu-button">跳过引导</button>
    </div>
  </div>

  <!-- 游戏结束界面 -->
  <div id="gameOverMenu" class="menu hidden">
    <h2>游戏结束</h2>
    <div class="score-display">
      <p>本局得分: <span id="finalScore">0</span></p>
      <p>最高分数: <span id="highScore">0</span></p>
    </div>
    <button id="playAgainButton" class="menu-button">再玩一次</button>
    <button id="gameOverMainMenuButton" class="menu-button">返回主菜单</button>
  </div>

  <!-- 引入Three.js 3D图形库 -->
  <script src="js/three.min.js"></script>
  <!-- 引入jQuery库用于DOM操作 -->
  <script src="js/jquery-3.6.0.min.js"></script>
  <!-- 引入GSAP动画库 -->
  <script src="js/gsap.min.js"></script>
  <!-- 引入主要的游戏逻辑JS文件 -->
  <script type="module" src="js/game.js"></script>
</body>

</html>